<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>
<script>
import { onMounted } from "@vue/runtime-core";
import geoJson from "../../assets/data.json";
import map from "../../utils/map";
import echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("china", geoJson); //注册可用地图，必须包括geo组件或者map图表类型的时候才能使用
      let option = map;
      myChart.setOption(option);
    });
     // 如果还是希望使用this.$echarts而不是import echarts的话,那么依旧可以沿用vue2语法来写
  },
};
</script>
<style lang="less" scoped>
.map-view {
  width: 100%;
  #main {
    width: 89%;
    height: 600px;
  }
}
</style>